<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用jq之前需要先引入该文件，才能使用里面的方法 -->
    <script src="jquery-3.6.0.min.js"></script>
    <!-- <script>
        // 一个页面只能有一个window.onload   如果有多个的话，后面的会覆盖前面的
        window.onload = function() {
            console.log(2);
            var demo = document.getElementById("demo").innerHTML;
            console.log(demo);
        }
        window.onload = function() {
            console.log(11);
            var demo = document.getElementById("demo").innerHTML;
            console.log(demo);
        }
    </script> -->
    <script>
        $(function() {
            $("#demo").html("hello,plum"); //设置值
            // html()（获取设置html内容）相当于innerHTML   $("#demo")（选择器 与css规则相同）相当于document.getElementById("demo")
            let demo = $("#demo").html(); //获取值
            console.log(demo);
            let demo2 = $("#demo").text(); //获取文本内容，会将HTML过滤掉
            console.log(demo2);
            // val()获取，设置表单内容
            $(".title").val("默认值"); //设置值
            var title = $(".title").val(); //获取值
            console.log(title);
            // 通过标签加属性设置获取值     设置默认选中第二个
            $("select[name='type']").val(2);
            // $("#demo").append('<a href="">年后</a>');
            // $("#demo").after('<a href="">年后</a>');
        })
    </script>
</head>

<body>
    <div id="demo" style="border: 1px solid red;">内容1</div>
    <input type="text" class="title" value=""><br>
    <select name="type" id="">
        <option value="1">公司新闻</option>
        <option value="2">行业动态</option>
    </select>
    <!-- <script>
        var demo = document.getElementById("demo").innerHTML;
        console.log(demo);
    </script> -->
</body>

</html>